<!-- 首页 -->
<template>
  <view class="work-container">
	
    <!-- 轮播图 -->
	<swiper :interval="3000" :current="current" :autoplay="true" @change="handleSwiperChange" :style="{height:height+'px'}">
	  <swiper-item v-for="(item,index) in getImgList" :key="index">
	    <image :src="item" style="height: 100%;width: 100%;" @click="toHome(index)"></image>
	  </swiper-item>
	</swiper>
    <!-- 宫格组件 -->
    <uni-section title="我的订票" type="line"></uni-section>
    <!-- 列表显示我的订票信息 eadc99-->
    <view>
      <u-list style="height: 50%">
        <u-list-item
            v-for="(item, index) in orderList"
            :key="index"
        >
          <u-cell
              :title="`类型：${item.ticketType} 时间：${item.ticketDate} 数量：${item.num}`"
          >
          </u-cell>
        </u-list-item>
      </u-list>
    </view>
    <uni-section title="我的收藏" type="line"></uni-section>
    <!-- 列表显示我的订票信息 -->
    <view>
      <u-list style="height: 50%">
        <u-list-item
            v-for="(item, index) in favoriteList"
            :key="index"
        >
          <u-cell
              :title="`文物名称：${item.artifactName}`"
              style="background-color: #f6dd66;"
          >
            <u-avatar
                slot="icon"
                shape="square"
                size="35"
                :src="getUrl(item.photoUrl)"
                customStyle="margin: -3px 5px -3px 0"
            ></u-avatar>
          </u-cell>
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>

<script>
import {listFavorite} from '@/api/system/favorite.js'
import {listOrder} from "@/api/system/order";
import config from "@/config";
export default {
  data() {
    return {
		getImgList: [
		    require('@/static/images/banner/1.jpg'),
		    require('@/static/images/banner/2.jpg'),
		    require('@/static/images/banner/3.jpg'),
		    require('@/static/images/banner/4.jpg'),
		  ],
		  height: '200',
		  current: '',
      swiperDotIndex: 0,
      data: [{
        image: '/static/images/guide/1.png'
      },
        {
          image: '/static/images/guide/2.png'
        },
        {
          image: '/static/images/guide/3.png'
        },
        {
          image: '/static/images/guide/4.png'
        }
      ],
      orderList: [], //订票列表
      favoriteList: [],//收藏列表
    }
  },
  methods: {
	  handleSwiperChange(e) {
	    // 当滑动到第三个swiper-item时跳转
	    if (e.detail.current === 4) {
	      uni.reLaunch({
	        url: '/pages/login'
	      })
	    }
	  },
	  toHome(index) {
	    if (index === 4) {
	      uni.reLaunch({
	        url: '/pages/login'
	      })
	    }
	  },
	  onLoad() {
	    //随机0-3的数字
	    this.current = Math.floor(Math.random() * 4);
	    this.getHeight();
	  },
    clickBannerItem(item) {
      console.info(item)
    },
    changeSwiper(e) {
      this.current = e.detail.current
    },
    changeGrid(e) {
      this.$modal.showToast('模块建设中~')
    },
    getUrl(url) {
      return config.baseUrl + url
    },
    handleCancelFavorite() {
      this.$modal.showToast('模块建设中~')
    }
  },
  onShow() {
    // 获取订票信息
    listOrder({pageSize: 10,pageNum:1}).then(res => {
      if (res.total > 5) {
        this.orderList = res.rows.slice(0, 5)
      } else {
        this.orderList = res.rows
      }
    })
    // 获取收藏信息
    listFavorite({pageSize: 10,pageNum:1}).then(res => {
      if (res.total > 5) {
        this.favoriteList = res.rows.slice(0, 5)
      } else {
        this.favoriteList = res.rows
      }
    })
  },
}
</script>

<style lang="scss" scoped>

/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100%;
  height: auto;
  background-image: url('../static/images/indexbg.png') !important;
  background-size: cover;
}

view {
  font-size: 14px;
  line-height: inherit;
}

.u-cell{
  margin: 10rpx;
  background-color: #eadc99;
}

/* #endif */

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.swiper {
  height: 200px;
}

.swiper-box {
  height: 220px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 200rpx;
  line-height: 200rpx;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}
</style>
